<!--
	地震动时程
	Created by Penglei on 2023/08/10
-->
<template>
	<div id="groundMotionChartsRef" ref="groundMotionChartsRef" class="echats-box"></div>
</template>

<script setup name="GroundMotion">
import { computed, getCurrentInstance, onMounted } from 'vue';
// 引入echats
import * as echarts from 'echarts';
// 引入接口
import { getDataByIdApi } from '@/api/vulnerability';
// 引入公用方法
import { ArrayObjUniq } from '@/utils/ruoyi';

// 当前实例
const { proxy } = getCurrentInstance();
// 父组件传参
const props = defineProps({
	// 获取数据参数id
	paramId: {
		type: String,
		requied: false,
		defualt: () => ''
	},
	// 视频播放百分比
	percentage: {
		type: Number,
		requied: false,
		defualt: () => 0
	},
});

let myChart = null;
// 处理后的图表数据
let chartData = [];
// x轴数据
let dataAxis = [];
// 折线数据
let arrData = [];
// 散点数据
let arrScatter = [];
// 配置项
const setOption = () => {
	// 根据百分比，向下取整获取下标
	const index = Math.ceil(props.percentage * chartData.length);
	const item = chartData[index];
	let startValue = 0;
	if(item) {
		startValue = item.time - 30;
		// 设置涟漪点数据
		arrScatter = [[item.time, item.displacement]];
	}
	return {
		// 提示
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		// 图例
		legend: {
			show: false,
			right: 10,
			top: 80,
			align: 'left', //朝向
			orient: 'vertical', //垂直
			borderRadius: 0,
			itemWidth: 6,
			itemHeight: 6,
			itemGap: 10,
			textStyle: {
				fontSize: 14,
				color: '#FFFFFF70',
			},
		},
		xAxis: {
			type: 'value',
			min: 0,
			name: '时间/s',
			nameLocation: 'center',
			nameTextStyle: {
				fontSize: 14,
				color: '#FFFFFF',
				align: 'center',
				verticalAlign: 'middle',
				padding: [50, 0, 0, 0]
			},
			// 线条和刻度
			axisLine: {
				show: true,
				lineStyle: {
					color: '#475ADB',
					width: 2,
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				inside: false,
				margin: 11,
				fontSize: 14,
				color: '#FFFFFF',
			},
			splitLine: {
				show: false,
			},
			data: dataAxis,
		},
		yAxis: {
			type: 'value',
			name: '加速度',
			nameLocation: 'center',
			nameTextStyle: {
				fontSize: 14,
				color: '#FFFFFF',
				align: 'center',
				verticalAlign: 'middle',
				padding: [-100, 0, 0, 0]
			},
			// 线条和刻度
			axisLine: {
				show: false,
			},
			axisLabel: {
				inside: false,
				margin: 15,
				fontSize: 14,
				color: '#FFFFFF',
			},
			splitLine: {
				lineStyle: {
					type: 'dashed',
					color: '#475ADB80'
				}
			}
		},
		grid: {
			show: false,
			left: 80,
			right: 20,
			top: 30,
			bottom: 50,
		},
		// 数据缩放
		dataZoom: [
			{
				show: true,
				// 开始值
				startValue: startValue,
				// 结束值，显示6个数据
				endValue: startValue + 60,
				type: 'inside',
				xAxisIndex: 0,
				filterMode: 'empty',
			}
		],
		color: ['#FFB35B', '#FFF700'],
		series: [
			{
				name: '加速度',
				type: 'line',
				// 平滑
				smooth: false,
				data: arrData,
				// 数据点大小
				symbolSize: 1,
			},
			// 涟漪特效散点图
			{
				type: 'effectScatter',
				symbolSize: 10,
				data: arrScatter,
			},
		]
	};
}
// 渲染图表
const renderChart = (data) => {
	if (!myChart) {
		myChart = echarts.init(proxy.$refs.groundMotionChartsRef);
	}
	dataAxis.length = 0;
	arrData.length = 0;
	arrScatter.length = 0;
	if (data && data.length) {
		// 去重、排序
		chartData = ArrayObjUniq(data, 'time').sort((a, b) => a.time - b.time);
		// 数据抽稀
		if(chartData.length > 10000) {
			chartData = chartData.filter((item, index) => {
				return index % 60 == 0 || index == chartData.length - 1;
			});
		} else if(chartData.length > 1000) {
			chartData = chartData.filter((item, index) => {
				return index % 10 == 0 || index == chartData.length - 1;
			});
		} else if(chartData.length > 100) {
			chartData = chartData.filter((item, index) => {
				return index % 2 == 0 || index == chartData.length - 1;
			});
		}
		// 遍历
		chartData.map((item, index) => {
			dataAxis.push(item.time);
			arrData.push([item.time, item.displacement]);
			if (index == 0) {
				arrScatter.push([item.time, item.displacement]);
			}
		})
	}
	// let dataAxis = [0, 10, 20, 30, 40, 50, 60];
	// const arrData = [[0, 0], [10, 0], [20, -0.02], [30, 0.02], [40, 0.04], [50, -0.01], [60, 0]];

	// 配置项
	const option = setOption();
	// 渲染
	option && myChart.setOption(option);
}

// 根据基础信息查出主键
const getData = () => {
	getDataByIdApi({
		id: props.paramId
	}).then(res => {
		const { code, data } = res;
		// 渲染图表
		renderChart(data);
	}).catch(err => {
		console.log(err.message);
	})
}
// 监听参数id改变
watch(() => props.paramId, (val) => {
	// 根据基础信息查出主键
	getData();
}, {
	// 深层嵌套
	deep: true,
	// 初始触发
	// immediate: true
})
// 视频播放时间点
watch(() => props.percentage, (val) => {
	// console.log(val);
	if (myChart) {
		// 配置项
		const option = setOption();
		// 渲染
		option && myChart.setOption(option);
	}
}, {
	// 深层嵌套
	deep: true,
	// 初始触发
	// immediate: true
})
</script>

<style lang="scss" scoped>
.echats-box {
	width: 100%;
	height: 230px;
}
</style>